<template>
  <div class="Main">
    <div class="MainTitle">绑定销售代表列表</div>
    <div class="MianContent">
      <div class="MainTopAction" style="display:flex;justify-content: space-between;">
        <div class="MainTopActionOne flex">
          <!-- <a-button style="margin-right:20px;" type="primary" size="large" @click="toAddGoods" icon="plus"
            >新增{{current==1?'医药商品':'普通商品'}}</a-button
          >
          <div v-if="current == 1">
            药监类目：
            <el-select v-model="drug_type" @change="selectDrugType" clearable placeholder="请选择药品类型">
              <el-option
                v-for="item in drugTypeList"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </div> -->
        </div>
        <div style="display:flex;">
          <el-input placeholder="输入商品信息模糊搜索" v-model="keyword" @input="clearFn" @keyup.enter.native="GetList('search')" clearable ></el-input>
          <el-button style="margin-left:10px;" type="primary" @click="GetList('search')">搜索</el-button>
        </div>
      </div>
      <a-table
        :columns="listfields"
        :data-source="listData"
        :bordered="true"
        :pagination="false"
      >
        <div slot="indexNum" slot-scope="row, index">
          {{ (pageno * 1 - 1) * pagesize + (index.indexNum * 1 + 1) }}
        </div>
        <div slot="salesType" slot-scope="row, index">
          <div>{{row=='sales'?'销售经理':row=='sales_client'?'销售代表':''}}</div>
        </div>
        <div slot="sale_realname" slot-scope="row, index">
          {{ index.sale_realname?index.sale_realname:index.sale_nickname?index.sale_nickname:index.sale_mobile }}
        </div>
        <div slot="action" slot-scope="row, index">
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-around;
              margin-bottom: 6px;
            "
          >
            <a-button type="primary" style="margin-right:10px;" size="small" @click="changeSales(index)"
              >更换上级经理</a-button
            >
            <a-popconfirm
              placement="bottom"
              ok-text="确定"
              cancel-text="取消"
              @confirm="setSales(index)"
            >
              <template slot="title">
                <p>警告</p>
                <p>此操作会将当前销售代表设为销售经理, 是否继续?</p>
              </template>
              <a-button type="danger" size="small">设为销售经理</a-button>
            </a-popconfirm>
          </div>
        </div>
        <div slot="logo" slot-scope="row, index">
          <img
            style="width: 50px; height: 50px"
            @click="seeImg(index)"
            :src="row"
            alt=""
          />
        </div>
      </a-table>
      <Pagination
        :total="total"
        v-model="pageno"
        :pageSize.sync="pagesize"
        @change="handlePageChange"
        @onShowSizeChange="onShowSizeChange"
      ></Pagination>
      <a-modal
        title="销售经理列表"
        v-model="modalShow"
        centered
        ok-text="确认"
        :maskClosable="false" 
        cancel-text="取消"
        @cancel="cancelBtn"
        @ok="modalSubmit"
        :width="920"
      >
        <div style="padding-left: 10px">
          <!-- <div class="flex align-center justify-between"> -->
            <!-- <div>
              销售员类型
              <el-select
                v-model="salesType"
                @change="selectSalesType"
                clearable
                placeholder="选择销售类型"
              >
                <el-option key="sales" label="销售经理" value="sales">
                </el-option>
                <el-option
                  key="sales_client"
                  label="销售代表"
                  value="sales_client"
                >
                </el-option>
              </el-select>
            </div> -->
            <div style="display: flex">
              <el-input
                placeholder="输入信息搜索"
                v-model="salesKeyword"
                @input="clearSalesFn"
                @keyup.enter.native="searchSales"
                clearable
              ></el-input>
              <el-button
                style="margin-left: 10px"
                type="primary"
                @click="searchSales"
                >搜索</el-button
              >
            </div>
          <!-- </div> -->
          <div style="margin-top: 10px">
            <a-table
              :columns="listfieldsSales"
              :data-source="salesList"
              :bordered="true"
              :pagination="false"
              :row-selection="{
                selectedRowKeys: selectedRowKeys,
                onChange: onSelectChange,
                type: checkType,
              }"
            >
              <div slot="indexNum" slot-scope="row, index">
                {{
                  (pagenoSales * 1 - 1) * pagesizeSales +
                  (index.indexNum * 1 + 1)
                }}
              </div>
              <!-- <div slot="action" slot-scope="row, index">
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    margin-bottom: 6px;
                  "
                >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="EditItem(index.id, 'view')"
                    >换绑</el-button
                  >
                </div>
              </div> -->
              <div slot="salesType" slot-scope="row, index">
                <div>
                  {{
                    row == "sales"
                      ? "销售经理"
                      : row == "sales_client"
                      ? "销售代表"
                      : ""
                  }}
                </div>
              </div>
              <div slot="nickname" slot-scope="row, index">
                {{ index.nickname?index.nickname:index.user_mobile }}
              </div>
              <div slot="logo" slot-scope="row, index">
                <div @click="ClickLookImage(row)" v-if="row">
                  <img :src="row[0]" style="width: 50px; height: 50px" />
                </div>
              </div>
              <div slot="image" slot-scope="row, index">
                <div @click="ClickLookImage(row)" v-if="row">
                  <img :src="row[0]" style="width: 50px; height: 50px" />
                </div>
              </div>
            </a-table>
            <Pagination
              :total="totalSales"
              v-model="pagenoSales"
              :pageSize.sync="pagesizeSales"
              @change="handlePageChangeSales"
              @onShowSizeChange="onShowSizeChangeSales"
            ></Pagination>
          </div>
        </div>
      </a-modal>
      <a-modal v-model="LookImages" :footer="null" centered>
        <div style="margin: 10px">
          <img :src="SelectImg" style="width: 100%; height: 100%" />
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState, mapActions } from "vuex";
import { showErrors, showError, showSuccess } from "@/utils/showMsg";
import Pagination from "@/components/common/pagination.vue";
import UploadImage from "@/components/common/Upload";
import { bindSalesClientList } from '@/views/Columns/BindSupplier.js';
import {
  GetBindList,
  GetProductBrandAdd,
  GetProductBrandDel,
  GetProductBrandEdit,
  ChangeSaleParent
} from "@/api/api.js";
export default {
  name: "list",
  components: {
    Pagination,
    UploadImage,
  },
  data() {
    return {
      modalShow: false,
      pageno: 1, //默认第几页
      pagesize: 10, //一页显示多少条数据
      total: 0, //总数
      listData: [], //表格数据
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      keyword: "",
      listfields:bindSalesClientList,
      listfieldsSales: [
        {
          title: "序号",
          dataIndex: "index",
          scopedSlots: { customRender: "indexNum" },
          align: "center",
          width: 80,
        },
        {
          title: "经理identity_id",
          dataIndex: "identity_id",
          align: "center",
        },
        {
          title: "经理userId",
          dataIndex: "user_id",
          align: "center",
        },
        {
          title: "名称",
          dataIndex: "store_name",
          align: "center",
        },
        {
          title: "联系电话",
          dataIndex: "user_mobile",
          align: "center",
        },
        {
          title: "销售类型",
          dataIndex: "type",
          scopedSlots: { customRender: "salesType" },
          align: "center",
        },
        {
          title: "创建时间",
          dataIndex: "create_time",
          // scopedSlots: { customRender: 'address' },
          align: "center",
        },
      ],
      form: {
        title: "",
        sort: "",
        logo: [],
        type: 1
      },
      rules: {
        title: [{ required: true, message: "请输入名称!", trigger: "blur" }],
        sort: [{ required: true, message: "请选择分类类型!", trigger: "blur" }],
        logo: [{ type:'array',required: true, message: '请上品牌icon图', trigger: 'change', }, ],
      },
      LookImages: false,
      SelectImg: "",
      current:'1',

      
      changeItem: {}, //需要换绑的项
      salesType: undefined, //选中的销售员类型
      salesList: [], //销售员列表
      totalSales: 0,
      pagenoSales: 1,
      pagesizeSales: 10,
      salesKeyword: "",

      selectedRowKeys: [],
      // selectedRows: [],
      checkType: "radio",
      parentId:null, //当前绑定的销售经理的identityId
      sales_user_id:null,//当前绑定的销售经理的user_id
    };
  },
  computed: {
    // ...mapState({
    //   listfields: (state) => state.ProductBrand.fields, //获取table头
    // }),
  },
  mounted() {
    // this.GetFields();
    this.GetList();
  },
  methods: {
    // ...mapActions({
    //   GetFields: "ProductBrand/GetFields", //获取table头
    // }),

    // 查看图片
    seeImg(row) {
      const that = this;
      that.LookImages = true;
      that.SelectImg = row.logo;
    },

    // 选择tabs
    selectTabs(){
      const that = this;
      that.pageno = 1;
      that.pagesize = 10;
      that.GetList()
    },
    
    // 清除输入框
    clearFn(){
      const that = this;
      if(that.keyword == ''){
        that.GetList('search')
      }
    },

    // 设置为销售经理
    async setSales(row){
        const that = this;
        let params = {
          sale_id: row.user_id,
          to_parent_id: 0,
        };
        let res = await ChangeSaleParent(params);
        if (res.data.code == 1) {
          showSuccess("设置销售经理成功");
        //   that.cancelBtn();
          that.GetList();
        } else {
          showError(res.data.msg);
        }
    },

    // 获取销售代表列表
    async GetList(type) {
      const that = this;
      if(type == 'search'){
        that.pageno = 1;
        that.pagesize = 10
      }
      let params = {
        keyword: that.keyword,
        page: that.pageno,
        pageSize: that.pagesize,
        type:'sales_client'
      };
      let res = await GetBindList(params);
      if (res.data.code == 1) {
        let data = res.data.data;
        data.list.forEach((item,index) => {
          item.key = item.user_id;
          item.indexNum = index;
        });
        that.listData = data.list;
        that.total = data.count;
      } else {
        showError(res.data.msg);
      }
    },
    
    // 弹出确定
    async modalSubmit() {
      let that = this;
      if (!that.selectedRowKeys.length) {
        showError("请选择需要换绑的销售经理！");
        return;
      }

      if (that.selectedRowKeys[0] == that.sales_user_id) {
        that.cancelBtn();
      } else {
        let params = {
          sale_id: that.changeItem.user_id,
          to_parent_id: that.selectedRowKeys[0],
        };
        let res = await ChangeSaleParent(params);
        if (res.data.code == 1) {
          showSuccess("换绑成功");
          that.cancelBtn();
          that.GetList();
        } else {
          showError(res.data.msg);
        }
      }
    },

    // 弹出取消
    cancelBtn() {
      const that = this;
      that.selectedRowKeys = [];
      that.parentId = null,
      that.sales_user_id = null,
      that.salesKeyword = "";
      that.pagenoSales = 1;
      that.pagesizeSales = 10;
      that.totalSales = 0;
      that.salesList = [];
      that.changeItem = {};
      that.modalShow = false;
    },

    // 换绑
    changeSales(row) {
      console.log(row);
      const that = this;
      that.changeItem = row;
      that.parentId = row.parent_id;
      that.modalShow = true;
      that.getSalesList();
    },

    // 选择销售员类型
    selectSalesType(e) {
      const that = this;
      that.getSalesList();
    },

    // 清除弹出销售列表搜索输入框
    clearSalesFn() {
      const that = this;
      if (that.salesKeyword == "") {
        that.searchSales();
      }
    },
    // 搜索销售人员
    searchSales() {
      const that = this;
      that.pagenoSales = 1;
      that.pagesizeSales = 10;
      that.getSalesList();
    },
    // 获取销售人员
    async getSalesList() {
      const that = this;
      let params = {
        keyword: that.salesKeyword,
        page: that.pagenoSales,
        pageSize: that.pagesizeSales,
        type: 'sales',
      };
      let res = await GetBindList(params);
      if (res.data.code == 1) {
        let data = res.data.data;
        data.list.forEach((item, index) => {
          item.key = item.user_id;
          item.indexNum = index;

          // 获取当前绑定的经理userid，回显到列表选中
          if(that.parentId == item.identity_id){
            that.sales_user_id = item.user_id;
            that.selectedRowKeys = [item.user_id]
          }

        });
        that.salesList = data.list;
        that.totalSales = data.count;

      }
    },

    //分页器
    handlePageChange(pageno, pagesize) {
      //点击第几页触发的函数
      this.pageno = pageno;
      this.pagesize = pagesize;
      this.GetList(); //这个是向后台请求的数据函数
    },
    //切换每页显示多少条
    onShowSizeChange(current, size) {
      //改变每页显示条目数的函数
      //pagesize 变化的回调
      this.pageno = current;
      this.pagesize = size;
      this.GetList(); //这个是向后台请求的数据函数
    },

    // 弹出选择销售表格分页
    //分页器
    handlePageChangeSales(pageno, pagesize) {
      //点击第几页触发的函数
      this.pagenoSales = pageno;
      this.pagesizeSales = pagesize;
      this.getSalesList(); //这个是向后台请求的数据函数
    },
    //切换每页显示多少条
    onShowSizeChangeSales(current, size) {
      //改变每页显示条目数的函数
      //pagesize 变化的回调
      this.pagenoSales = current;
      this.pagesizeSales = size;
      this.getSalesList(); //这个是向后台请求的数据函数
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      //   this.selectedRows = selectedRows;
      console.log(this.selectedRowKeys, "选中的数据项");
    },
  },
};
</script>

<style scoped lang="stylus">
.editable-row-operations a {
  margin-right: 12px;
}
.Main {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  .MainTitle {
    font-size: 24px;
    color: #333;
    margin: 10px 20px;
    position: relative;
  }
  .MainTitle:before {
    content: '';
    width: 40px;
    height: 12px;
    background: linear-gradient(270deg, rgba(0, 158, 238, 0) 0%, rgba(0, 158, 238, 0.3) 100%);
    position: absolute;
    bottom: 2px;
    left: 0;
  }
  .MianContent {
    padding: 10px 20px 20px 20px;
    .MainTopAction {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .MainTopActionView {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .MainTopActionOne {
          margin-right: 30px;
          span {
            margin-right: 20px;
          }
        }
        .MainTopActionTwo {
          span {
            margin-right: 20px;
          }
        }
      }
      .MainTopActionThree {
        display: flex;
        align-items: center;
        margin-left: 20px;
      }
    }
  }
}
</style>